<template>
	<view>
		<cu-custom bgColor="bg-grey light" :isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">空教室查询</view>
		</cu-custom>

		<view :class="'cu-modal ' + (showAlert ? 'show' : '')">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
					<view class="action" @tap="hideAlert">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">请先在课表里设置周数</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn bg-brown margin-left" @tap="hideAlert">确定</button>
					</view>
				</view>
			</view>
		</view>

		<loginModal :showLoginModal.sync="isLoginModalShow" @changes="loginModalConfirm"></loginModal>

		<view class="flex justify-center padding-sm text-center">
			<view :class="'load-progress ' + (loadProgress != 0 ? 'show' : 'hide')" :style="'top:' + CustomBar + 'px;'">
				<view class="load-progress-bar bg-green"
					:style="'transform: translate3d(-' + (100 - loadProgress) + '%, 0px, 0px);'"></view>
			</view>

			<view class="margin-lr-sm">
				<button class="line-orange cu-btn" role="button" :aria-disabled="false">
					<picker mode="multiSelector" @change="classChange" @columnchange="classColumnChange"
						:value="classIndex" :range="classArray">
						<text class="text-df margin-right-sm">{{ schoolArr[schoolArrIndex] }} - {{ classArr[schoolArrIndex][classArrIndex] }}</text>
					</picker>
					<text class="cuIcon-rounddown"></text>
				</button>
			</view>

			<view class="margin-lr-sm">
				<button class="line-brown cu-btn" role="button" :aria-disabled="false">
					<picker @change="weekChange" :value="nowWeek" :range="weekArr">
						<text class="text-df margin-right-sm">{{ nowWeek ? weekArr[nowWeek] : '请选择' }}</text>
					</picker>
					<text class="cuIcon-rounddown"></text>
				</button>
			</view>

			<button :class="'cu-btn line-pink round icon ' + (isLoad ? 'loading' : '')" @tap="enforceRefresh">
				<text class="cuIcon-loading"></text>
			</button>
		</view>

		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view :class="'cu-item flex-sub text-sm ' + (index == TabCur ? 'text-orange cur' : '')" @tap="tabSelect"
					:data-id="index" v-for="(item, index) in weeks" :key="item.key">
					{{ item }}
				</view>
			</view>
		</scroll-view>

		<view class="flex">
			<view class="bg-red light solid-right text-df text-white padding" style="width: 180rpx">
				<text>第一节</text>
			</view>
			<view class="bg-grey light padding-xs flex flex-wrap" style="width: 100%; color: black">
				<view class="padding-xs" v-for="(item, index) in classAllArr[0]" :key="item.key">
					<view :data-id="item[1]" data-num="0" @tap="roomSelect"
						:class="'cu-tag ' + (roomCheck[item[1]] & (filterArr[0] | closeFilter) ? 'bg-brown' : 'line-brown')">
						{{ item[0] }}
					</view>
				</view>
			</view>
		</view>

		<view class="flex">
			<view class="bg-orange light solid-right text-df text-white padding" style="width: 180rpx">
				<text>第二节</text>
			</view>
			<view class="bg-white padding-xs flex flex-wrap" style="width: 100%; color: black">
				<view class="padding-xs" v-for="(item, index) in classAllArr[1]" :key="item.key">
					<view :data-id="item[1]" data-num="1" @tap="roomSelect"
						:class="'cu-tag ' + (roomCheck[item[1]] & (filterArr[1] | closeFilter) ? 'bg-brown' : 'line-brown')">
						{{ item[0] }}
					</view>
				</view>
			</view>
		</view>

		<view class="flex">
			<view class="bg-red light solid-right text-df text-white padding" style="width: 180rpx">
				<text>第三节</text>
			</view>
			<view class="bg-grey light padding-xs flex flex-wrap" style="width: 100%; color: black">
				<view class="padding-xs" v-for="(item, index) in classAllArr[2]" :key="item.key">
					<view :data-id="item[1]" data-num="2" @tap="roomSelect"
						:class="'cu-tag ' + (roomCheck[item[1]] & (filterArr[2] | closeFilter) ? 'bg-brown' : 'line-brown')">
						{{ item[0] }}
					</view>
				</view>
			</view>
		</view>

		<view class="flex">
			<view class="bg-orange light solid-right text-df text-white padding" style="width: 180rpx">
				<text>第四节</text>
			</view>
			<view class="bg-white padding-xs flex flex-wrap" style="width: 100%; color: black">
				<view class="padding-xs" v-for="(item, index) in classAllArr[3]" :key="item.key">
					<view :data-id="item[1]" data-num="3" @tap="roomSelect"
						:class="'cu-tag ' + (roomCheck[item[1]] & (filterArr[3] | closeFilter) ? 'bg-brown' : 'line-brown')">
						{{ item[0] }}
					</view>
				</view>
			</view>
		</view>

		<view class="flex">
			<view class="bg-red light solid-right text-df text-white padding" style="width: 180rpx">
				<text>第五节</text>
			</view>
			<view class="bg-grey light padding-xs flex flex-wrap" style="width: 100%; color: black">
				<view class="padding-xs" v-for="(item, index) in classAllArr[4]" :key="item.key">
					<view :data-id="item[1]" data-num="4" @tap="roomSelect"
						:class="'cu-tag ' + (roomCheck[item[1]] & (filterArr[4] | closeFilter) ? 'bg-brown' : 'line-brown')">
						{{ item[0] }}
					</view>
				</view>
			</view>
		</view>

		<view class="side_tool">
			<button class="cu-btn icon round bg-brown" @tap="clearFilter">
				<text class="cuIcon-close"></text>
			</button>

			<button class="cu-btn icon round bg-brown" @tap="setFilter">
				<text class="cuIcon-filter"></text>
			</button>
		</view>

		<view :class="'cu-modal bottom-modal ' + (showFilter ? 'show' : '')">
			<view class="cu-dialog" catchtap>
				<view class="cu-bar bg-white">
					<view class="action text-brown" @tap="hideFilter"> </view>
					<view class="action text-brown" @tap="confirmFilter">确认</view>
				</view>
				<view class="padding-sm">
					<view class="padding-xs">
						<button :class="'cu-btn  block ' + (filterArr[0] ? 'bg-brown' : 'line-brown')"
							@tap="filterChange" data-value="1">第一节</button>
					</view>
					<view class="padding-xs">
						<button :class="'cu-btn  block ' + (filterArr[1] ? 'bg-brown' : 'line-brown')"
							@tap="filterChange" data-value="2">第二节</button>
					</view>
					<view class="padding-xs">
						<button :class="'cu-btn  block ' + (filterArr[2] ? 'bg-brown' : 'line-brown')"
							@tap="filterChange" data-value="3">第三节</button>
					</view>
					<view class="padding-xs">
						<button :class="'cu-btn  block ' + (filterArr[3] ? 'bg-brown' : 'line-brown')"
							@tap="filterChange" data-value="4">第四节</button>
					</view>
					<view class="padding-xs">
						<button :class="'cu-btn  block ' + (filterArr[4] ? 'bg-brown' : 'line-brown')"
							@tap="filterChange" data-value="5">第五节</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import {
		getKong
	} from '../../utils/getKong.js'
	import loginModal from '@/pages/login-modal/index'
	export default {
		components: {
			loginModal,
		},
		data() {
			return {
				CustomBar: app.globalData.CustomBar,
				nowWeek: 1,
				weekArr: [
					'请选择',
					'第一周',
					'第二周',
					'第三周',
					'第四周',
					'第五周',
					'第六周',
					'第七周',
					'第八周',
					'第九周',
					'第十周',
					'第十一周',
					'第十二周',
					'第十三周',
					'第十四周',
					'第十五周',
					'第十六周',
					'第十七周',
					'第十八周',
					'第十九周',
					'第二十周',
					'第二十一周',
					'第二十二周',
					'第二十三周',
					'第二十四周',
					'第二十五周'
				],
				classArray: [
					['校本部', '西校区'],
					['勤学楼', '致学楼', '操场', '大数据', '矿山压力', '力学楼', '煤矿实景基地', '思源楼', '思齐楼', '思辨楼', '实习工厂', '图书馆', '行知楼']
				],
				schoolArr: ['校本部', '西校区'],
				classArr: [
					['勤学楼', '致学楼', '操场', '大数据', '矿山压力', '力学楼', '煤矿实景基地', '思源楼', '思齐楼', '思辨楼', '实习工厂', '图书馆', '行知楼'],
					['2号教学楼', '办公楼', '操场', '机房', '教学楼', '阶梯教室']
				],
				schoolArrIndex: 0,
				classArrIndex: 0,
				classIndex: [0, 0],
				loadProgress: 0,
				isLoad: false,
				classAllArr: [],
				TabCur: 0,
				scrollLeft: 0,
				weeks: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				roomCheck: [],
				filterArr: [false, false, false, false, false],
				showFilter: false,
				closeFilter: true,
				isLoginModalShow: false,
				showAlert: false
			};
		},
		onLoad: function(options) {
			let that = this;
			uni.getStorage({
				key: 'userID',
				fail() {
					uni.redirectTo({
						url: '/pages/login/index'
					});
				},
				success() {
					that.doSuccess();
				}
			});
		},
		methods: {
			doSuccess() {
				let that = this;
				uni.getStorage({
					key: 'kongKeSetSchool',
					success: function() {
						that.setData({
							schoolArrIndex: uni.getStorageSync('kongKeSetSchool'),
							classArrIndex: uni.getStorageSync('kongKeSetClass'),
							classIndex: [uni.getStorageSync('kongKeSetSchool'), uni.getStorageSync(
								'kongKeSetClass')]
						});
					},

					fail() {
						that.setData({
							schoolArrIndex: 0,
							classArrIndex: 0,
							classIndex: [0, 0]
						});
					}
				}); //周数判断

				uni.getStorage({
					key: 'keBiaoDataWeekBegin',

					success(res) {
						let timeTemp = new Date().getTime();
						let weekTemp = Math.ceil((timeTemp - parseInt(res.data)) / 604800000);
						that.setData({
							nowWeek: weekTemp
						});

						if (weekTemp > 26) {
							weekTemp = 26;
						}
						that.nowWeek = weekTemp;
						that.refresh();
					},

					fail() {
						// 提示请先获取课表
						that.setData({
							showAlert: true
						});
						that.nowWeek = 0;
					}
				});
				var day = new Date().getDay();

				if (day == 0) {
					day = 7;
				}

				this.setData({
					TabCur: day - 1
				});
			},


			loginModalConfirm(e) {
				this.refresh()
			},

			tabSelect(e) {
				this.setData({
					TabCur: e.currentTarget.dataset.id,
					scrollLeft: (e.currentTarget.dataset.id - 1) * 60
				});
				this.refresh();
			},

			loadProgressFun() {
				this.setData({
					loadProgress: this.loadProgress + 3
				});

				if (this.loadProgress < 100) {
					setTimeout(() => {
						this.loadProgressFun();
					}, 100);
				} else {
					this.setData({
						loadProgress: 0
					});
				}
			},

			async refresh(n) {
				let that = this;
				uni.showLoading({
					title: '正在获取信息'
				});
				this.loadProgressFun();
				this.setData({
					isLoad: true
				});


				let res = await getKong(that.classArrIndex, that.TabCur + 1, that.schoolArrIndex, that.nowWeek, 0)
				console.log(res)
				if (res == null) {
					that.setData({
						isLoad: false,
						isLoginModalShow: true
					});
					return
				}

				uni.hideLoading();
				that.clearFilter();

				let uptime = res.uptime;
				let now_time = new Date().getTime();
				let time_dis = Math.round((now_time - uptime) / 60000);


				if (time_dis < 5) {
					time_dis = '刚刚';
				} else {
					time_dis = time_dis + '分钟前';
				}

				uni.showToast({
					title: time_dis + '更新'
				});

				that.setData({
					classAllArr: res.classAllArr,
					isLoad: false,
					loadProgress: 0,
					roomCheck: res.roomCheck
				});

			},

			roomSelect(room) {
				let num = room.currentTarget.dataset.num;
				room = room.currentTarget.dataset.id;

				if (!this.filterArr[num] & !this.closeFilter) {
					return;
				}



				let res = this.roomCheck[room];

				res = !res

				this.$set(this.roomCheck, room, res)
			},

			clearFilter() {
				let roomCheck = this.roomCheck;
				let filterArr = this.filterArr;
				roomCheck.fill(false);
				filterArr.fill(false);
				this.setData({
					roomCheck,
					filterArr,
					closeFilter: true
				});
			},

			setFilter() {
				this.setData({
					showFilter: true
				});
			},

			filterChange(n) {
				let res = this.filterArr[n.currentTarget.dataset.value - 1];
				res = !res
				this.$set(this.filterArr, n.currentTarget.dataset.value - 1, res)
			},

			hideFilter() {
				this.setData({
					showFilter: false,
				})
			},

			confirmFilter() {
				let map = new Map();
				let filterArr = this.filterArr;
				let classAllArr = this.classAllArr;
				let roomCheck = this.roomCheck;
				roomCheck.fill(false);
				let cnt = 0;

				for (let i in filterArr) {
					if (filterArr[i]) {
						cnt += 1;

						for (let j in classAllArr[i]) {
							let room_id = classAllArr[i][j][1];
							let t = map.get(room_id);

							if (t == undefined) {
								map.set(room_id, 1);
							} else {
								map.set(room_id, t + 1);
							}
						}
					}
				}

				for (let [key, value] of map) {
					if (value == cnt) {
						roomCheck[key] = true;
					}
				}

				this.setData({
					showFilter: false,
					roomCheck,
					closeFilter: false
				});
			},

			enforceRefresh() {
				this.refresh(1);
			},

			hideModal(e) {
				this.setData({
					showModal: false,
					captcha: '',
					setting: ''
				});
			},

			weekChange(e) {
				this.setData({
					nowWeek: e.detail.value
				});
				this.refresh();
			},

			classChange(e) {
				this.setData({
					classIndex: e.detail.value
				});
				this.setData({
					schoolArrIndex: this.classIndex[0],
					classArrIndex: this.classIndex[1]
				});
				uni.setStorageSync('kongKeSetSchool', this.classIndex[0]);
				uni.setStorageSync('kongKeSetClass', this.classIndex[1]);
				this.refresh();
			},

			classColumnChange(e) {
				let data = {
					classArray: this.classArray,
					classIndex: this.classIndex
				};
				data.classIndex[e.detail.column] = e.detail.value;

				switch (e.detail.column) {
					case 0:
						switch (data.classIndex[0]) {
							case 0:
								data.classArray[1] = [
									'勤学楼',
									'致学楼',
									'操场',
									'大数据',
									'矿山压力',
									'力学楼',
									'煤矿实景基地',
									'思源楼',
									'思齐楼',
									'思辨楼',
									'实习工厂',
									'图书馆',
									'行知楼'
								];
								break;

							case 1:
								data.classArray[1] = ['2号教学楼', '办公楼', '操场', '机房', '教学楼', '阶梯教室'];
								break;
						}

						break;
				}

				this.setData(data);
			},


			hideAlert() {
				this.setData({
					showAlert: false
				});
				uni.redirectTo({
					url: '/pages/kebiao/index'
				});
			}
		}
	};
</script>
<style>
	@import './index.css';
</style>
